<template>
  <div>
    <div v-if="total > limit" class="flex justify-center items-center py-10">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="limit"
        :current-page="page"
        layout=" prev, pager, next"
        :total="total"
        hideOnSinglePage
      >
      </el-pagination>
      <div class="hidden">
        <nuxt-link v-for="(p, k) in Math.ceil(total / limit)" :to="`${$route.path}?page=${p}`" :key="k">
          {{ p }}
        </nuxt-link>
      </div>
    </div>
  </div>
</template>
<script>
  /**
   * 分页组件
   * @param {Number} total 总记录数
   * @param {Number} page 当前页码
   * @param {Number} limit 每页显示的记录数
   * @param {Function} change 页码变化时触发的事件，参数为当前页码和每页显示的记录数
   * @example
   * <Paging
   *   :total="total"
   *   :page.sync="page"
   *   :limit.sync="limit"
   *   @change="handlePageChange"
   * />
   */
  export default {
    data() {
      return {}
    },
    props: {
      total: {
        type: Number,
        default: 0 // 总记录数
      },
      page: {
        type: [Number, String],
        default: 1 // 当前页码
      },
      limit: {
        type: Number,
        default: 10 // 每页显示的记录数
      },
      currentQuery: {
        // 新增这个prop
        type: Object,
        default: () => ({})
      }
    },
    // watch: {
    //   // 监听路由变化
    //   "$route.query.page"(newVal) {
    //     const pageNum = parseInt(newVal) || 1;
    //     if (pageNum !== this.page) {
    //       this.$emit("update:page", pageNum);
    //     }
    //   },
    // },
    methods: {
      // 每页条数变化处理
      handleSizeChange(val) {
        this.$emit('update:limit', val) // 更新 limit 属性
        this.$emit('change', {
          page: this.page,
          limit: val,
          query: this.currentQuery
        }) // 触发 change 事件，传递当前页码和新的每页条数
      },
      // 页码变化处理
      handleCurrentChange(val) {
        this.$emit('update:page', val)
        this.$emit('change', {
          page: val,
          limit: this.limit,
          query: this.currentQuery
        })
        window.scrollTo({
          top: 0,
          behavior: 'smooth'
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  /deep/.el-pager .active {
    color: #ff4e33 !important;
  }
  /deep/.el-pagination button:hover {
    color: #ff4e33 !important;
  }
  /deep/.el-pagination .el-pager li:hover {
    color: #ff4e33 !important;
  }
</style>
